<template>
	<div class="container">
		<el-form class="formdiv" ref="form" :model="form" label-width="80px">
			<el-form-item label="接收人">
				<el-select v-model="form.userids" filterable multiple placeholder="请选择" class="selectdiv">
					<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="消息标题">
				<el-input v-model="form.title"></el-input>
			</el-form-item>
			<el-form-item label="消息内容">
				<el-input type="textarea" v-model="form.content" rows="5"></el-input>
			</el-form-item>
			<el-form-item label="附件上传">
				<el-upload class="upload-demo" action="/admin/message/uploadfile" :on-success="handleSuccess"
					:on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1"
					:on-exceed="handleExceed" :file-list="form.fileList">
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">附件需小于5M</div>
				</el-upload>
			</el-form-item>



			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即发送</el-button>
				<el-button @click="goback">返  回</el-button>
			</el-form-item>
		</el-form>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				options: [],
				form: {
					userids: '',
					title: '',
					content: '',
					fileList: []
				},
				
			}
		},
		mounted() {
			this.getusers()
		},
		methods: {
			getusers() {
				axios.get('/admin/msg/getmsgusers').then(res => {
					this.options = res.data.data
				}).catch(function(err) {
					console.log(err)
				})
			},
			addfood() {
				window.location.href = '/admin/foods/addfood'
			},
			onSubmit() {
				var that=this
				axios.post('/admin/msg/addmsg',this.form).then(res => {
					console.log(res)
					if (res.data.code == 1) {
						this.$alert(res.data.msg, '发送成功', {
							confirmButtonText: '确定',
							callback: action => {
								window.location.href = '/admin/msg/msglist'
							}
						})
					}
				}).catch(function(err) {
					console.log(err)
					that.$notify({
						title: '发送失败',
						message: err,
						type: 'error'
					})
				})
			},
			goback(){
				window.location.href = '/admin/msg/msglist'
			},
			handleRemove(file, fileList) {
				this.form.fileList=fileList
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
			},
			beforeRemove(file, fileList) {
				return this.$confirm('确定移除 ' +file.name +' ？')
			},
			handleSuccess(response, file, fileList){
				this.form.fileList=fileList
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.formdiv {
		width: 800px;
		margin: 10px auto;

		.selectdiv {
			width: 100%;
		}
	}
</style>
